<template>
  <div class="container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div>
        <el-button
          :type="isColor == 1 ? 'success' : ''"
          class="btnColor"
          @click="changePage(1)"
          >商品管理</el-button
        >
        <el-button :type="isColor == 2 ? 'success' : ''" @click="changePage(2)"
          >仓库</el-button
        >
      </div>
      <div v-if="isPage === 1" class="isPageDiv">
        <div class="searchForm">
          <el-form inline :model="searchForm" class="chazhaodiv">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.goodsCharge"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" class="formitem20px">
              <el-select v-model="searchForm.categoryName">
                <el-option label="衣服" value="1"></el-option>
                <el-option label="数码" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="价格" class="formitem20px">
              <el-input
                v-model="searchForm.price.beg_jifen"
                class="input120DIV"
              >
                <template slot="append">元</template>
              </el-input>
              <span> - </span>
              <el-input
                v-model="searchForm.price.end_price"
                class="input120DIV"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="积分" class="formitem20px">
              <el-input
                v-model="searchForm.jifen.beg_jifen"
                class="input120DIV"
              >
                <template slot="append">积分</template>
              </el-input>
              <span> - </span>
              <el-input
                v-model="searchForm.price.end_jifen"
                class="input120DIV"
              >
                <template slot="append">积分</template>
              </el-input>
            </el-form-item>
            <el-form-item class="formitem20px">
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="quanxuanDiv">
          <div class="btnDIVfenlei1">
            <el-checkbox>当页全选</el-checkbox>
            <el-button class="xiajiabtn">下架</el-button>
            <el-button class="xiajiabtn">删除</el-button>
          </div>
          <div class="btnDIVfenlei">
            <router-link :to="{ path: '/goodsChargeCreate' }">
              <el-button type="success">发布商品</el-button>
            </router-link>
          </div>
        </div>
        <div class="tableDIV">
          <el-table :data="goodsTableData" border>
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column label="商品" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.goodsName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="150px">
              <template slot-scope="scope">
                <div>{{ scope.row.price.jifen }}积分</div>
                <div>{{ scope.row.price.xianjin }}现金</div>
              </template>
            </el-table-column>
            <el-table-column label="访问量" width="150px">
              <template slot-scope="scope">
                <div>访客数: {{ scope.row.visit.visitPeople }}</div>
                <div>访问量: {{ scope.row.visit.visitNum }}</div>
              </template>
            </el-table-column>
            <el-table-column label="库存" width="100px">
              <template slot-scope="scope">
                <div>{{ scope.row.store }}</div>
              </template>
            </el-table-column>
            <el-table-column label="销量" width="100px">
              <template slot-scope="scope">
                <div>{{ scope.row.sale }}</div>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150px">
              <template slot-scope="scope">
                <div>{{ scope.row.createTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="商品状态" width="100px">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.status == 1"
                  type="success"
                  effect="dark"
                  >销售中</el-tag
                >
                <el-tag v-if="scope.row.status == 2" effect="dark"
                  >已下架</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="300">
              <template>
                <el-button class="el-icon-edit" type="info">编辑</el-button>
                <el-button class="el-icon-delete" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
      <div v-if="isPage === 2" class="isPageDiv">
        <div class="searchForm">
          <el-form inline :model="searchForm" class="chazhaodiv">
            <el-form-item label="商品名称">
              <el-input v-model="searchForm.goodsCharge"></el-input>
            </el-form-item>
            <el-form-item label="分类名称">
              <el-select v-model="searchForm.categoryName">
                <el-option label="衣服" value="1"></el-option>
                <el-option label="数码" value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="价格" class="formitem20px">
              <el-input
                v-model="searchForm.price.beg_jifen"
                class="input120DIV"
              >
                <template slot="append">元</template>
              </el-input>
              <span> - </span>
              <el-input
                v-model="searchForm.price.end_price"
                class="input120DIV"
              >
                <template slot="append">元</template>
              </el-input>
            </el-form-item>
            <el-form-item label="积分" class="formitem20px">
              <el-input
                v-model="searchForm.jifen.beg_jifen"
                class="input120DIV"
              >
                <template slot="append">积分</template>
              </el-input>
              <span> - </span>
              <el-input
                v-model="searchForm.price.end_jifen"
                class="input120DIV"
              >
                <template slot="append">积分</template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
          </el-form>
        </div>

        <div class="quanxuanDiv">
          <div class="btnDIVfenlei1">
            <el-checkbox>当页全选</el-checkbox>
            <el-button class="xiajiabtn">上架</el-button>
            <el-button class="xiajiabtn">删除</el-button>
          </div>
          <div class="btnDIVfenlei"></div>
        </div>
        <div class="tableDIV">
          <el-table :data="goodsTableData" border>
            <el-table-column type="selection" width="40"> </el-table-column>
            <el-table-column label="商品" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.goodsName"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="价格" width="150px">
              <template slot-scope="scope">
                <div>{{ scope.row.price.jifen }}积分</div>
                <div>{{ scope.row.price.xianjin }}现金</div>
              </template>
            </el-table-column>
            <el-table-column label="访问量" width="150px">
              <template slot-scope="scope">
                <div>访客数: {{ scope.row.visit.visitPeople }}</div>
                <div>访问量: {{ scope.row.visit.visitNum }}</div>
              </template>
            </el-table-column>
            <el-table-column label="库存" width="100px">
              <template slot-scope="scope">
                <div>{{ scope.row.store }}</div>
              </template>
            </el-table-column>
            <el-table-column label="销量" width="100px">
              <template slot-scope="scope">
                <div>{{ scope.row.sale }}</div>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="150px">
              <template slot-scope="scope">
                <div>{{ scope.row.createTime }}</div>
              </template>
            </el-table-column>
            <el-table-column label="商品状态" width="100px">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.status == 1"
                  type="success"
                  effect="dark"
                  >销售中</el-tag
                >
                <el-tag v-if="scope.row.status == 2" effect="dark"
                  >已下架</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="250px">
              <template>
                <el-button class="el-icon-edit" type="info">保存</el-button>
                <el-button class="el-icon-delete" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="1"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isColor: 1,
      isPage: 1,
      searchForm: {
        goodsName: "",
        categoryName: "",
        price: {
          beg_price: "",
          end_price: ""
        },
        jifen: {
          beg_jifen: "",
          end_jifen: ""
        }
      },
      goodsTableData: [
        {
          picture: "",
          goodsName: "托马斯小火车套装玩具男孩益智",
          price: {
            jifen: "4330",
            xianjin: "4330"
          },
          visit: {
            visitPeople: "12",
            visitNum: "23"
          },
          store: "22",
          sale: "23",
          createTime: "2021-1-28 14:05",
          status: "1"
        },
        {
          picture: "",
          goodsName: "托马斯小火车套装玩具男孩益智",
          price: {
            jifen: "4330",
            xianjin: "4330"
          },
          visit: {
            visitPeople: "12",
            visitNum: "23"
          },
          store: "22",
          sale: "23",
          createTime: "2021-1-28 14:05",
          status: "2"
        },
        {
          picture: "",
          goodsName: "托马斯小火车套装玩具男孩益智",
          price: {
            jifen: "4330",
            xianjin: "4330"
          },
          visit: {
            visitPeople: "12",
            visitNum: "23"
          },
          store: "22",
          sale: "23",
          createTime: "2021-1-28 14:05",
          status: "1"
        }
      ]
    };
  },
  created() {},
  methods: {
    changePage(n) {
      this.isPage = n;
      this.isColor = n;
    }
    // toAddGoodS() {
    //   this.$route.push({ path: "/" });
    // }
  }
};
</script>

<style lang="scss" scoped>
.tableDIV {
  margin: 20px 0 0 0;
}
.isPageDiv {
  margin: 20px 20px 0 0px;
  .xiajiabtn {
    margin-left: 20px;
  }
  .quanxuanDiv {
    display: flex;
    margin-top: 20px;
    .btnDIVfenlei1 {
      width: 50%;
    }
  }
  .btnDIVfenlei {
    width: 50%;
    display: flex;
    justify-content: flex-end;
  }
}
.bannerDiv {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.searchForm {
  background-color: #f2f2f2;
  .chazhaodiv {
    padding: 20px 0 0 20px;
  }
}
.el-pagination {
  margin: 60px 30%;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}
.input120DIV {
  width: 120px;
}

.formitem20px {
  margin-left: 20px;
}
.el-pagination {
  margin: 20px !important;
}
</style>
